import React from 'react'
// 从react-redux中引入connect高阶组件函数
// 哪个react组件需要用到redux的数据,或需要修改redux的数据. 就在这个组件的代码中引入connnect
import { connect } from 'react-redux'
function Count(props) {
  console.log(props)
  return (
    <div>
      <p>{props.xxx}</p>
      <button
        onClick={() => {
          props.dispatch({ type: 'INCREMENT', num: 100 })
        }}
      >
        +
      </button>
      <button>-</button>
    </div>
  )
}
// WithCount是Count的父组件
// WithCount中利用store.subscribe监听了redux数据的变化,一旦数据变化WithCount要更新,会导致Count更新. 而且WithCount可以利用store.getState获取到redux最新的数据,然后通过props传递给Count

// connect函数第一次调用.如果什么都不传,react组件只能通过props拿到一个dispatch方法.这个方法就是store.dispatch
// 如果react组件,需要使用redux中的某个数据,就必须在第一次调用connect的时候,传入一个过滤数据的函数
function mapStateToProps(state) {
  // 调用时机: 1. 当connect函数第一次执行是,会被调用 2. 当redux数据变化时,也会调用,为了将最新数据传给Count
  console.log('mapState执行了', state)
  return {
    xxx: state.count,
  }
}
const WithCount = connect(mapStateToProps)(Count)
export default WithCount
/*
function connect(){
  return () => {
    return class XXX extends Component{

    }
  }
}



*/
